<template>
  <addEditPrintTaskForm ref="addEditPrintTaskForm" />
  <div class="app-table">
    <div class="app-body">
      <div class="app-search">
        <el-form :inline="true" class="demo-form-inline" v-model="form">
          <el-form-item label="起止时间">
            <el-date-picker v-model="form.duration" type="daterange" range-separator="To" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD" :size="large" />
          </el-form-item>
          <el-form-item label="送稿内容" style="width: 220px;">
            <el-input placeholder="请输入送稿内容" v-model="form.taskName"></el-input>
          </el-form-item>
          <el-form-item label="审批状态" style="width: 220px;">
            <el-select placeholder="请选择审批状态" v-model="form.status" clearable>
              <el-option label="未审批" value="0"></el-option>
              <el-option label="已审批" value="1"></el-option>
              <el-option label="已上传" value="2"></el-option>
              <el-option label="已退回" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" plain>搜索</el-button>
            <el-button type="success" @click="add" plain>添加</el-button>
            <el-button type="warning" v-if="power" @click="goApproval" plain>我的审批</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="list" style="margin-bottom: 10px" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号" width="90" />
        <el-table-column prop="userDepartment" label="使用部门" width="260" />
        <el-table-column prop="taskName" label="送稿内容" />
        <el-table-column prop="submitTime" label="上传日期" width="110" />
        <el-table-column prop="amount" label="数量" width="70" />
        <el-table-column prop="paperSize" label="纸张" width="80" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column label="操作" width="200px">
          <template #default="scope">
            <el-button size="small" type="success" v-if="scope.row.status !== '已审批'"
              @click="editPrintTaskForm(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" v-if="scope.row.status !== '已审批'"
              @click="deleteApp(scope.row.taskId)">删除</el-button>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table>
      <el-config-provider :locale="locale">
        <el-pagination background="white" :total="total" :page-size="limit" :page-sizes="[8, 10, 20, 30, 40, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
          @current-change="changeCurrentPage">
        </el-pagination>
      </el-config-provider>
    </div>
    <bottomView></bottomView>
  </div>
</template>
<script  >
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import addEditPrintTaskForm from "../../components/printingSystem/addEditPrintTaskForm";
import bottomView from "../../components/bottom";
import { httpService } from "../../utils/httpService";
export default {
  name: "appListView",
  data() {
    return {
      list: [],
      limit: 8,
      page: 1,
      total: 0,
      value: "",
      pageCount: 0,
      power: 0,
      form: {
        userDepartment: "",
        status: "",
        teacherName: "",
        duration: "",
        taskName: ""
      },
    };
  },
  mounted() {
    this.getPrintList()
  },

  components: {
    addEditPrintTaskForm,
    bottomView,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  methods: {
    getPrintList() {
      // if (this.form.status == 0) this.form.status = null
      httpService(
        `/javaApi/printTaskForm/myList/${this.page}/${this.limit}`,
        {
          duration: this.form.duration, teacherName: this.form.teacherName, userDepartment: this.form.userDepartment,
          status: this.form.status, isDelete: 0,
        },
        "get"
      ).then((data) => {
        console.log(data);
        this.list = data.list
        this.total = data.total
      });
    },
    // add() {
    //   httpService(
    //     "/pythonApi/printingSystem/teacherInfo",
    //     {},
    //     "get"
    //   ).then((data) => {
    //     this.$refs.addEditPrintTaskForm.addPrintTaskForm = data.data;
    //     this.$refs.addEditPrintTaskForm.addPrintTaskForm.userDepartment = this.$refs.addEditPrintTaskForm.addPrintTaskForm.departmentName;
    //     this.$refs.addEditPrintTaskForm.addPrintTaskForm.paperSize = "B4";
    //   });
    //   this.$refs.addEditPrintTaskForm.dialogFormVisible = true;
    //   this.$refs.addEditPrintTaskForm.title = "添加任务";
    //   this.$refs.addEditPrintTaskForm.fileList = []
    // },
    editPrintTaskForm(taskId) {
      this.$refs.addEditPrintTaskForm.title = "修改任务";
      this.$refs.addEditPrintTaskForm.getPrintTaskFormById(taskId);
      this.$refs.addEditPrintTaskForm.dialogFormVisible = true;
    },
    // deleteApp(id) {
    //   ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       httpService("/javaApi/printTaskForm/edit", "id=" + id, "post").then((data) => {
    //         if (data.status == 200) {
    //           ElMessage.success("删除成功");
    //           this.getTaskList();
    //         } else {
    //           ElMessage.error("任务不存在或已审批");
    //         }
    //       });
    //     })
    //     .catch(() => { });
    // },
    onSearch() {
      this.getPrintList();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.limit = size;
      this.getPrintList()
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      console.log(page);
      this.page = page;
      this.getPrintList()
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },

    goApproval() {
      this.$parent.power = this.power;
    },
    downTaskList() {
      httpService(
        "/pythonApi/printingSystem/downApprovalData",
        {
          duration: this.form.duration, teacherName: this.form.teacherName, userDepartment: this.form.userDepartment,
          status: this.form.status
        },
        "get"
      ).then((data) => {
      });
    },
  },
};
</script>

<style scoped>
.app-table {
  background: #eff3f5;
  padding: 10px;
  width: calc(100vw - 220px);
}

.app-search {}


.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 243px);
}
</style>